<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/baidu.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/animate.min.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>

<body>
    <div class="index-warp">
        <div class="nav-top">
            <div class="container">

                <div class="right">
                    <div class="con">
                        <div>
                            <span>君乐宝乳业集团</span>
                        </div>


                    </div>
                    <!-- <div class="search_but">
                        <img src="../images/ser.png" alt="">
                    </div> -->
                    <div class="search">
                        <div class="cons">
                            <input type="search" name="" id="textId" placeholder="关键词">
                            <button onclick="search()"></button>
                        </div>


                    </div>
                    <a href=""><img src="../images/gw.png" alt=""></a>
                    <a href=""><img src="../images/tm_05.jpg" alt=""></a>
                    <a href=""> <img src="../images/tm_03.jpg" alt=""></a>


                </div>
            </div>
        </div>

        <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand " href="#" id="nav_bar"><img src="../images/logo (1).png" alt=""></a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">首页</a></li>
                        <li class="dropdown">
                            <a href="about_jlb.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">关于君乐宝</a>
                            <ul class="dropdown-menu">
                                <li><a href="about_jlb.html">公司概况</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="enterprise_culture.html">企业文化</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="social_responsibility.html">社会责任</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">发展历程</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="enterprise_honor.html">企业荣誉</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="culture_jq.html">文化景区</a></li>
                                <li role="separator" class="divider"></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="news.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">新闻中心</a>
                            <ul class="dropdown-menu">
                                <li><a href="news.html">企业新闻</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="media.html">媒体关注</a></li>
                                <li role="separator" class="divider"></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="brank_ products.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">品牌产品</a>
                            <ul class="dropdown-menu">
                                <li><a href="brank_ products.html">品牌理念</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="milk_powder.html">奶粉</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="yogurt.html">酸奶</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="fresh_milk.html">鲜奶</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="liquid_milk.html">液态奶</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="another.html">其他</a></li>
                                <li role="separator" class="divider"></li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="join_jlb.html" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-haspopup="true" aria-expanded="false">加入君乐宝</a>
                            <ul class="dropdown-menu">
                                <li><a href="join_jlb.html">人才理念</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">社会招聘</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">校园招聘</a></li>
                                <li role="separator" class="divider"></li>
                            </ul>
                        </li>
                        <li><a href="tender_announcement.html">招标公告</a></li>
                        <li><a href="ours.html">联系我们</a></li>
                    </ul>


                </div>
            </div>
        </nav>

        <div class="lb">
            <div class="swiper-container swiper-container-one">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../images/lb1.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/lb2.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/lb3.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/lb4.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../images/lb5.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets" id="anniu">
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
            </div>
        </div>

        <div class="dsq">
            <div class="container-fluid">
                <div class="container">
                    <div class="dsq_row row">
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="dsq_con">
                                <span class="dsq_one">21</span>
                                <p>21家生产工厂 </p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="dsq_con">
                                <span class="dsq_two">17</span>
                                <p>17座现代化牧场 </p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="dsq_con">
                                <span class="dsq_there">100000</span>
                                <p>10万头优质奶牛</p>
                            </div>
                        </div>
                        <div class="col-md-3 col-sm-3 col-xs-6">
                            <div class="dsq_con">
                                <span class="dsq_four">500000</span>
                                <p>50万亩牧草种植基地</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dsq_b">
            <div class="container">
                <div class="cons">
                    <p>君乐宝乳业集团</p>
                    <div class="row">
                        <div class="con col-lg-5 animate__bounceInLeft animate__animated ">
                            君乐宝乳业集团创立于1995年，26年来始终专注于奶业发展，为消费者提供健康、营养、安全的乳制品。集团现有员工14000余人，业务范围包括婴幼儿奶粉、低温液态奶、常温液态奶、牧业四大板块，在河北、河南、江苏、吉林等地建有21个生产工厂、17个现代化大型牧场，销售市场覆盖全国。

                        </div>
                        <div class="con col-lg-2 con2 "></div>
                        <div class="con col-lg-5 animate__bounceInRight animate__animated">

                            近年来，君乐宝持续加大研发创新，不断优化产品结构，努力推动奶业高质量发展，首创“全产业链一体化”和“五个世界级”生产经营模式，努力实现四个“最”：质量最优、品牌最强、社会最放心、消费者最满意。
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div class="news">
            <div class="container">
                <div class="title">

                </div>

            </div>
        </div>

        <div class="lb2">
            <div class="container">
                <div class="nav">
                    <div class="nav1 action"><span><a href=""> 奶粉</a></span></div>
                    <div class="nav1"><span><a href=""> 酸奶</a></span></div>
                    <div class="nav1"><span><a href=""> 鲜奶</a></span></div>
                    <div class="nav1"><span><a href=""> 液态奶</a></span></div>
                    <div class="nav1"><span><a href="">其他 </a></span></div>
                </div>
                <div class="centent">
                    <div class="con1 show">
                        <div class="swiper-container swiper-container-two">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/lb2.1.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.2.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.3.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.4.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.6.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.7.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb2.8.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="con1">
                        <div class="swiper-container swiper-container-three">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/lb3.1.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.2.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.3.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.4.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.5.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.6.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.7.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.8.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.9.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.10.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.11.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.12.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb3.13.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="con1">
                        <div class="swiper-container swiper-container-four">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/lb4.1.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="con1">
                        <div class="swiper-container swiper-container-five">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/lb5.1.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.2.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.3.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.4.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.5.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.6.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.7.jpg" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb5.8.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="con1">
                        <div class="swiper-container swiper-container-six">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <img src="../images/lb6.1.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb6.2.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb6.3.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb6.4.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb6.5.png" alt="">
                                </div>
                                <div class="swiper-slide">
                                    <img src="../images/lb6.6.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="lb2_b">
            <div class="row">
                <div class="col-lg-6 col-xs-12 col-sm-12 left">
                    <div class="cons">
                        <h2>加入我们</h2>
                        <div class="con">
                            <p>公开选拔，公平竞争；</p>
                            <p>不拘一格，人尽其才。</p>
                        </div>
                        <a href="join_jlb.html">了解详情 ></a>
                    </div>

                </div>
                <div class="col-lg-6 col-xs-12 col-sm-12 right">
                    <div class="cons">
                        <h2>文化景区</h2>
                        <div class="con">
                            <p>君乐宝乳业集团全面开放牧场、工厂参观，让广大公众见证国产奶粉的世界级品质，目前已接待游客四百余万人，并被认定为国家</p>
                        </div>
                        <a href="culture_jq.html">了解详情 ></a>
                    </div>

                </div>
            </div>

        </div>

        <div class="kong">

        </div>

        <div class="foot">
            <div class="container">
                <div class="cons">
                    <div class="right">
                        <div class="con">
                            <div><a href="">SRM</a></div>
                            <div>
                                <div class="erweima">
                                    <img src="../images/erweima.jpg" alt="">
                                </div>
                                <a href="">
                                    <img src="../images/wx05.png" alt="">
                                </a>

                            </div>
                            <div><a href=""><img src="../images/wb06.png" alt=""></a></div>
                        </div>

                    </div>
                    <div class="left">
                        <p>Address：河北省石家庄市鹿泉区石铜路36号</p>
                        <span>Tel：400-600-6611</span>
                        <span>E-mail：<a href="">jlb800@163.com</a></span>
                        <div class="con">
                            <span>ICP备案：<a href="">冀ICP备11023373号</a></span>
                            <span>Copyright@2020石家庄君乐宝乳业有限公司 </span>
                            <a href="">网站建设：新鸿儒</a>
                        </div>
                    </div>
                    
                </div>

            </div>
        </div>

    </div>

    <script src="../js/jQuey-min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/swiper.min.js"></script>

    <script>
        var mySwiper = new Swiper('.swiper-container-one', {
            slidesPerView: 1,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                }
            },
        })

        var mySwiper2 = new Swiper('.swiper-container-two', {
            slidesPerView: 3,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            // pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 2,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                }
            },
        })

        var mySwiper3 = new Swiper('.swiper-container-three', {
            slidesPerView: 3,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            // pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                }
            },
        })

        var mySwiper4 = new Swiper('.swiper-container-four', {
            slidesPerView: 1,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            // pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                }
            },
        })


        var mySwiper5 = new Swiper('.swiper-container-five', {
            slidesPerView: 3,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            // pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                }
            },
        })



        var mySwiper6 = new Swiper('.swiper-container-six', {
            slidesPerView: 3,
            spaceBetween: 20,
            prevButton: '.swiper-button-prev',
            nextButton: '.swiper-button-next',
            loop: true,
            // pagination: '.swiper-pagination',
            paginationClickable: true,
            breakpoints: {
                539: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                767: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                }
            },
        })




        let dsq_one = document.querySelector('.dsq_one');
        var a = 0;
        var one = setInterval(function () {
            a += 1
            dsq_one.innerHTML = a;
            if (a == 21) {
                clearInterval(one)
            }
        }, 50);
        let dsq_two = document.querySelector('.dsq_two');
        var b = 0;
        var two = setInterval(function () {
            b += 1;
            dsq_two.innerHTML = b;
            if (b == 17) {
                clearInterval(two)
            }
        }, 50);

        let dsq_there = document.querySelector('.dsq_there');
        var c = 0;
        var there = setInterval(function () {
            c += 5000;
            dsq_there.innerHTML = c;
            if (c == 100000) {
                clearInterval(there)
            }
        }, 50);
        let dsq_four = document.querySelector('.dsq_four');
        var d = 0;
        var four = setInterval(function () {
            d += 25000;
            dsq_four.innerHTML = d;
            if (d == 500000) {
                clearInterval(four)
            }
        }, 50);


        var nav1 = document.getElementsByClassName('nav1');
        //   获取内容
        var con1 = document.getElementsByClassName('con1');

        // 遍历导航条
        for (var i = 0; i < nav1.length; i++) {
            //  存导航下标
            var _index = i;
            nav1[i].index = _index;
            // 点击事件
            nav1[i].onmouseover = function () {
                //  2---排他操作
                for (var j = 0; j < nav1.length; j++) {
                    nav1[j].setAttribute('class', 'nav1')
                    con1[j].setAttribute('class', 'con1')


                }
                // 点谁谁激活
                this.setAttribute('class', 'nav1 action')
                // 点谁展现谁
                con1[this.index].setAttribute('class', 'con1 show')


            }
        }

        function search(){
            var text = $("#textId" ).val();
            if(!isEmpty(text)){
                $("#textId" ).val("");
                window.location.href = "fj1b_2020/other_search.html?text="+text;
            
            }
        } 
    </script>
</body>

</html>